<template>
  <!--项目经历-->
  <view>
    <myHead
      :title="title"
      :right="true"
      text_right="保存"
      @clickRight="clickRight"
    ></myHead>
    <view class="conten">
      <view class="li-box fl-lr-c">
        <view class="name">项目名称</view>
        <view>
          <input
            v-model="name"
            placeholder-class="input_pal"
            type="text"
            value=""
            placeholder="请输入"
          />
        </view>
      </view>

      <view class="li-box fl-lr-c">
        <view class="name">项目时间</view>
        <view class="fl-t">
          <view class="content fl-t">
            <text @click="linJob(1)">
              <text v-if="startTime">{{ startTime | formatDateYM }}</text>
              <text v-else>开始时间</text>
            </text>
            <view class="connect">-</view
            ><text @click="linJob(2)">
              <text v-if="endTime">{{ endTime | formatDateYM }}</text>
              <text v-else>结束时间</text>
            </text>
          </view>
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>

      <view class="li-box fl-lr-c">
        <view class="name">担任角色</view>
        <view>
          <input
            v-model="RoleName"
            placeholder-class="input_pal"
            type="text"
            value=""
            placeholder="请输入"
          />
        </view>
      </view>

      <u-datetime-picker
        v-if="show1"
        :show="show1"
        mode="year-month"
        v-model="beginTime"
        title="请选择开始时间"
        closeOnClickOverlay
        @close="show1 = false"
        :minDate="beginMinDate"
        :maxDate="maxDate"
        @cancel="show1 = false"
        @confirm="changeDirthDate"
      >
      </u-datetime-picker>

      <u-datetime-picker
        v-if="show2"
        :show="show2"
        mode="year-month"
        v-model="finishTime"
        title="请选择结束时间"
        closeOnClickOverlay
        @close="show2 = false"
        :minDate="finishMinDate"
        :maxDate="maxDate"
        @cancel="show2 = false"
        @confirm="changeDirthDate"
      >
      </u-datetime-picker>

      <view class="li-box directionColumn">
        <view class="name">项目描述</view>
        <u--textarea
          style="margin-top: 30rpx"
          :confirmType="null"
          v-model="textarea"
          placeholder="请输入内容"
          count
          :height="100"
          maxlength="3000"
        >
        </u--textarea>
      </view>
    </view>
    <bottomBut @bottomBut="bottomBut" v-if="type == 2"></bottomBut>
    <u-toast ref="uToast" message="请先选择开始时间!" type="default"></u-toast>
  </view>
</template>

<script>
import myHead from "@/pages/component/baseHead.vue";
import bottomBut from "@/pages/component/bottomBut.vue";
import {
  atPresentTime,
  specifyBeforeVX,
  atPresentTimeX,
  TimeString,
} from "@/utils/Time";
export default {
  data() {
    return {
      title: "项目经历",
      show: false,
      show1: false,
      show2: false,
      type: 0,
      urls: "",
      RoleName: "",
      name: "",
      textarea: "",
      startTime: "",
      endTime: "",
      Performance: "",
      dateType: 1,
      kaishiTime: null,
      beginMinDate: 0,
      maxDate: 0,
      beginTime: "",
      finishTime: "",
      // 当前id
      Id: 0,
      // 父id
      fuid: 0,
    };
  },
  //子组件
  components: {
    myHead,
    bottomBut,
  },
  computed: {
    finishMinDate() {
      if (this.startTime) {
        return specifyBeforeVX(this.startTime, 0);
      } else {
        return this.beginMinDate;
      }
    },
  },
  onLoad(o) {
    this.beginMinDate = atPresentTimeX(60);
    this.maxDate = atPresentTime();
    this.type = o.type;
    this.fuid = o.fuid;
    if (this.type == 2) {
      let data = JSON.parse(o.data);
      console.log(data);
      this.Id = data.Id;
      this.name = data.ProjectName;
      this.textarea = data.Content;
      this.urls = data.Url;

      this.RoleName = data.RoleName;
      this.Performance = data.Performance;

      this.startTime = data.StartDate.split(" ")[0];
      this.endTime = data.EndDate.split(" ")[0];
    }
  },
  // 计算方法
  methods: {
    changeDirthDate(e) {
      this.kaishiTime = e;
      const timeFormat = uni.$u.timeFormat;
      let ds = timeFormat(e.value, "yyyy-mm-dd");
      if (this.dateType == 1) {
        //开始
        if (this.endTime) {
          if (ds > this.endTime) {
            this.$util.toast("开始时间不能高于结束时间");
            return;
          }
        }
        this.startTime = ds;
      } else {
        if (this.startTime) {
          if (ds < this.startTime) {
            this.$util.toast("结束时间不能低于开始时间");
            return;
          }
        }
        this.endTime = ds;
      }
      this.show1 = false;
      this.show2 = false;
    },
    clickRight() {
      if (!this.name.length) {
        this.$util.toast("请输入项目名称");
        return;
      }
      if (!this.startTime.length) {
        this.$util.toast("请选择项目开始时间");
        return;
      }
      if (!this.endTime.length) {
        this.$util.toast("请选择项目结束时间");
        return;
      }
      if (!this.RoleName.length) {
        this.$util.toast("请输入担任角色");
        return;
      }
      if (!this.textarea.length) {
        this.$util.toast("请输入项目描述");
        return;
      }

      if (this.type == 2) {
        //编辑修改
        this.$http.huirc
          .resumeprojectexpup({
            Id: this.Id,
            ResumeId: this.fuid,
            ProjectName: this.name,
            StartDate: this.startTime,
            EndDate: this.endTime,
            Content: this.textarea,
            Performance: this.Performance,
            RoleName: this.RoleName,
            Url: this.urls,
          })
          .then((res) => {
            if (res.Success) {
              this.$util.toast("保存成功");
              setTimeout(() => {
                uni.navigateBack();
              }, 1000);
            }
          });
      } else {
        this.$http.huirc
          .resumeprojectexpcr({
            ResumeId: this.fuid,
            ProjectName: this.name,
            StartDate: this.startTime,
            EndDate: this.endTime,
            Content: this.textarea,
            Performance: this.Performance,
            RoleName: this.RoleName,
            Url: this.urls,
          })
          .then((res) => {
            if (res.Success) {
              this.$util.toast("保存成功");
              setTimeout(() => {
                uni.navigateBack();
              }, 1000);
            }
          });
      }
    },
    bottomBut() {
      let that = this;
      uni.showModal({
        title: "删除提示",
        content: "确认要删除这条数据",
        success: function (res) {
          if (res.confirm) {
            let data = {
              Id: that.Id,
            };
            that.$http.huirc.resumeprojectexpdel(data).then((res) => {
              if (res.Success) {
                that.$util.toast("删除成功");
                setTimeout(() => {
                  uni.navigateBack();
                }, 1600);
              }
            });
          }
        },
      });
    },
    linJob(type) {
      this.dateType = type;
      if (type == 1) {
        this.beginTime = this.startTime
          ? this.startTime
          : TimeString(this.maxDate);
        this.show1 = true;
      } else {
        this.finishTime = this.endTime
          ? this.endTime
          : TimeString(this.maxDate);
        this.show2 = true;
      }
    },
  },
};
</script>


<style lang="scss" scoped>
.directionColumn {
  flex-direction: column;
}
.li-box {
  background-color: #fff;
  .name {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000000;
    flex-shrink: 0;
  }

  .logo {
    width: 106rpx;
    height: 106rpx;
    border-radius: 50%;
  }

  .input_pal,
  input,
  .content {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    text-align: end;

    .connect {
      padding: 0 20rpx;
      color: #000;
      font-size: 32rpx;
    }
  }

  .radio-box {
    margin-left: 50rpx;

    .radio-text {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
      padding-left: 20rpx;
    }
  }

  .tui-textarea {
    flex: 1;
  }
}
</style>